<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>主页</title>
    <link rel="stylesheet" href="css/layout.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="elementUI/index.css">
    <script src="js/js-cookie.js"></script>
    <script src="js/vue.js"></script>
    <script src="elementUI/index.js"></script>
</head>
<body>
<div id="app">
    <div class="pd20px" id="userName">
        <div>用户名：{{username}}&nbsp
            <el-button @click="tableShow=!tableShow">
                {{tableShow?'隐藏':'显示'}}tab 页
            </el-button>
        </div>
    </div>
    <el-tabs v-show="tableShow" v-model="activeName2" class="pd20px" type="card" @tab-click="handleClick">
        <el-tab-pane label="项目1：时钟" name="first">
            <div class="pd20px">
                当前时间：{{currentDate|formatDate}}
            </div>
            <div style="height: 500px">
                <my-clock></my-clock>
            </div>
        </el-tab-pane>
        <el-tab-pane label="项目2：背景音乐" name="second">
            <div>
                <audio ref="audioPlay" id='audio' src='music/chunnuanhuakai.mp3' autoplay loop controls>123
                </audio>
            </div>
            <div>
                <el-button @click="play">播放音乐</el-button>
                <el-button @click="stop">暂停音乐</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="项目3：超链接效果" name="third">
            <img src="img/lovelyDog.jpeg" style="width: 500px" alt="可爱的小狗">
            <a href="img/lovelyDog.jpeg" download="img/lovelyDog.jpeg">下载图片</a>
            <div>
                <a href="#pageBottom">去往底部</a>
                <ul>
                    <li v-for="i in 30">模拟文字列表</li>
                </ul>
                <a id="pageBottom" href="#userName">回到顶部</a>
            </div>
        </el-tab-pane>
        <el-tab-pane label="项目4：计算器" name="fourth">
            <div>
                <el-input v-model="multiplier" class="w200px"></el-input>
                *
                <el-input v-model="beMultiplier" class="w200px"></el-input>
                ={{multiplier*beMultiplier}}
            </div>
        </el-tab-pane>
    </el-tabs>
</div>
<script>
  function formatDate(date, fmt) {
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    let o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (let k in o) {
      let str = o[k] + '';
      if (new RegExp(`(${k})`).test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
      }
    }
    return fmt;
  };

  function padLeftZero(str) {
    return ('00' + str).substring(str.length);
  }

  var app = new Vue({
    el: '#app',
    data() {
      return {
        tableShow: true,
        activeName2: 'first',
        multiplier: null,
        beMultiplier: null,
        currentDate: new Date(),
        username: Cookies.get('username')
      };
    },
    mounted() {
      this.$confirm('是否播放背景音乐?', '提示').then(() => {
        this.play()
      });
      setInterval(() => {
        this.currentDate = new Date(); // 修改数据date
      }, 1000)
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      play() {
        this.$refs.audioPlay.play()
      },
      stop() {
        this.$refs.audioPlay.pause()
      }
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
      }
    },
    components: {
      myClock: {
        data() {
          return {
            cssClock: {//整个钟的盒子
              position: 'absolute',
              width: '500px',
              height: '500px',
              border: '1px solid black',
              borderRadius: '50%'
            },
            cssDotWrap: {//装刻度的盒子
              transform: 'translateX(250px)'
            },
            cssDot: {//刻度们
              position: 'absolute',
              width: '2px',
              backgroundColor: 'black'
            },
            cssNeedle: {//三根针
              position: 'absolute',
              left: '250px',
              backgroundColor: 'black',
              transformOrigin: 'center bottom'
            },
            currTime: new Date()//当前日期对象
          }
        },
        computed: {
          sec() {//将当前秒数转化为秒针旋转的度数
            return this.currTime.getSeconds() * 6;
          },
          min() {//将当前的分钟数转化为分针旋转的度数
            return this.currTime.getMinutes() * 6 + this.currTime.getSeconds() / 10;
          },
          hour() {//将当前的小时数转化为时针旋转的度数
            return this.currTime.getHours() * 30 + this.currTime.getMinutes() / 2;
          }
        },
        template: `<div :style="cssClock">
							<div :style="cssDotWrap">
								<div
									:style="Object.assign({},{
										transform: 'rotateZ('+i*6+'deg)',
										height: i%5==0?'30px':'10px',
										transformOrigin: '0px 250px'
									},cssDot)"
									v-for="(dot,i) in 60"
								></div>
							</div>
							<div
								:style="Object.assign({},{
									width: '8px',
									height: '200px',
									top: '50px',
									marginLeft: '-4px',
									transform: 'rotateZ('+hour+'deg)'
								},cssNeedle)"
							></div>
							<div
								:style="Object.assign({},{
									width: '4px',
									height: '230px',
									top: '20px',
									marginLeft: '-2px',
									transform: 'rotateZ('+min+'deg)'
								},cssNeedle)"
							></div>
							<div
								:style="Object.assign({},{
									width: '2px',
									height: '250px',
									marginLeft: '-1px',
									transform: 'rotateZ('+sec+'deg)'
								},cssNeedle)"
							></div>
						</div>
					`,
        created() {
          setInterval(() => {//钩子函数，在实例创建的时候运行定时器，我们只需要动态刷新当前的日期对象即可
            this.currTime = new Date();
          }, 1000)
        }
      }
    }
  })
</script>
<style>
</style>
</body>
</html>